Populating a Container with JavaScript

You can populate a container's cells using jQuery in a web app's page JavaScript.

Image with text

This example features a container with a single row and two columns;

• The first column is populated with the image file selected by an image panel control.
• The second column displays some text.

function category(){
   var image = fsi.getById('myImagePanel');
   var categoryCard='<div><img src="'+image+'">'+'</div>';
 
    $("[data-control-id='container-i8c9'] .row1.col1").append(categoryCard); 
    $("[data-control-id='container-i8c9'] .row1.col2").append('Click to select category');
  }

Custom button

This example builds a custom button using a container, in-line image, and some CSS styling.

JavaScript

 $("[data-control-id='container-LogIt']").prepend('<div class="fab" type="button" onClick="logItClick()"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADcSURBVFiF7ZexTQNBEEXfnSMkHJiMFqgG+rARJfhMCYgIt4BFCbgFB+4Ai8gOCIjQc3BOgA3Wo9Ndsl+aZLTz9bT6Wu1AQOpIfVR3p2rUOuIVkvrgf933CbBOALxHvKLXNkn0rvoE6EwFoAAUgAJQqSNgBtwCl5lzN8DFn943sM2c/wLegCfUReJd70tNpe6A60zyrvU5dAZ+auBlQIBlZfuTmQJ3wDhzsIsQroDnzPO/pW4SgdpEvIbOQAEoAAWgAIQBDonevk+AVaL3GvQ6X2ptu5J/nGpucD0/AtxKCHjfAxt2AAAAAElFTkSuQmCC"></img></div>');

Global CSS

.fab {
  background: #007fc0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  color: #FFF;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5), 3px 3px 3px rgba(0, 0, 0, 0.25);
  position: fixed;
  bottom: 600px;
  right: 200px;
  font-size: 30pt;
  display: inline-block;
  cursor: default;
  padding-top: 10px;
  z-index: 1001;
}